<template>
	<view class="screen" v-show="showScreen" @click="changeScreen"> 
		<view class="screen_con" v-if="screenList">
			<text v-for="(item,index) in screenList" :key="index" @click="cahngeFaCategorys(item)">{{item.name}}</text> 
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			showScreen:{
				type: Boolean,
				default: false
			},
			 screenList:{
				 type: Array,
				 default: () => []
			 },
			 cahngeCategorys:{
				 type: Function,
				 default: () => {}
			 }
		},
		data(){
			return {
				
			}
		},
		methods:{  
			changeScreen(){
				this.$parent.changeScreen()
			},
			cahngeFaCategorys(item){
				this.$emit('cahngeCategorys',item.id,item.name)
			}
		}
	}
</script>

<style lang="less" scoped>
	.screen{
		position: fixed;
		top: 60rpx;
		width: 100%;
		height: 100vh;
	    background-color:rgba(32, 30, 30, 0.5);
		z-index: 10;
		.screen_con{
			padding: 20rpx 0;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			min-height: 200rpx;
			background-color: #fff;
			z-index: 20;
			text {
				margin-bottom: 20rpx;
				width: 30%;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				border: 2rpx solid #eee;
				border-radius: 10rpx;
			}
			& text:nth-child(even){
				margin: 0 10rpx;
			}
		}
	}
</style>
